/*
 * @Description: 我的预约
 * @Author: ziwei.ma
 * @Date: 2019-07-23 10:23:07
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-09-02 14:49:18
 */

<template>
  <div class="page">
    <scroll
      ref="scroll"
      :useBody="useBody"
      :getListData="getListDataByScroll"
      :up="up"
      class="father-box"
      v-show="showType===1"
    >
      <template v-if="!isNoData">
        <reservation-item
          v-for="(option,index) in myReservationList"
          :key="index"
          :myReservationObj="myReservationList[index]"
          @afreshState="afreshState"
        ></reservation-item>
      </template>
      <!-- 无数据 -->
      <no-data
        v-else
        :imgSrc="require('../assets/nodata_bus.png')"
        text="无预约记录"
      ></no-data>
    </scroll>
    <!-- 无网络 -->
    <net-error
      v-show="showType===0"
      @click.native="afreshData"
    ></net-error>
  </div>
</template>

<script>
import ReservationItemVue from '../components/ReservationItem.vue'
import BottomBarVue from '../components/BottomBar.vue'
import { getMyReservationList } from '../api/api'
import { XBScroll } from 'vue-xb-ui-depot'
import NoData from '../../../components/NoData'
import NetErrorVue from '../../../components/NetError'
const SHOW_DATA = 1
const NET_ERROR = 0
export default {
  components: {
    'reservation-item': ReservationItemVue,
    'bottom-bar': BottomBarVue,
    'scroll': XBScroll,
    'no-data': NoData,
    'net-error': NetErrorVue
  },
  data() {
    return {
      myReservationList: [],
      // 是否使用body作为滑动容器
      useBody: false,
      up: {
        noMoreSize: 21,
        page: { size: 20 }
      },
      isNoData: false,
      showType: 1
    }
  },
  methods: {
    getListDataByScroll(pageIndex, pageCapacity) {
      return getMyReservationList(pageIndex, pageCapacity).then(res => {
        if (res.count === 0) {
          this.isNoData = true
          return { length: pageCapacity, count: 1 }
        } else {
          this.showType = SHOW_DATA
          this.myReservationList = pageIndex === 1 ? res.list : this.myReservationList.concat(res.list)
          return { length: pageCapacity, count: res.count }
        }
      }).catch(err => {
        if (err.error.code === 'ECONNABORTED') {
          this.showType = NET_ERROR
        }
        return { length: pageCapacity, count: 1 }
      })
    },
    afreshState() {
      this.reset()
      this.$refs.scroll.mescroll.resetUpScroll()
    },
    // 重置数据
    reset() {
      this.myReservationList = []
      this.showType = SHOW_DATA
    },
    // 点击无网络页面重新获取数据
    afreshData() {
      this.getListDataByScroll()
    },
    // 在预约单详情页进行操作后，返回预约单列表页获取缓存中的onAfresh字段，为true则刷新，刷新后清除该缓存
    _afreshChangedData() {
      let onAfresh = window.localStorage.getItem('onAfresh')
      if (onAfresh) {
        this.afreshState()
        window.localStorage.removeItem('onAfresh')
      }
    }
  },
  mounted() {
    document.addEventListener('resume', () => {
      this._afreshChangedData()
    })
  }
}
</script>

<style>
.father-box {
  padding: 32px 32px 100px 32px;
  box-sizing: border-box;
}
</style>
